<script lang="ts" setup>
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'product_category_CateManger'
})

const tree = ref([])

// 使用函数动态返回表头，实现语言切换时的实时更新
const columns = computed(
	(): TableColumns => [
		{
			title: t('分类管理.分类名'),
			dataIndex: 'name',
			align: 'center' as const,
			key: 'name'
		},
		{
			title: t('分类管理.状态'),
			dataIndex: '_status',
			align: 'center' as const,
			key: '_status'
		},
		{
			title: t('分类管理.创建时间'),
			dataIndex: '_created_at',
			align: 'center' as const,
			key: '_created_at'
		},
		{
			title: t('分类管理.操作'),
			key: 'action',
			dataIndex: 'action',
			align: 'center' as const
		}
	]
)
const editForm = reactive({
	id: 0,
	name: '',
	status: '',
	pid: 0,
	pName: ''
})
const editFormRules = reactive({
	name: [{ required: true, message: '请输入分类名!' }]
})
const isEditShow = ref(false)
const editFormRef = ref()

const getCateTree = () => {
	const formParams = {
		permissionName: '商品库-分类管理'
	}
	Api.post('/product/category/list', formParams, true).then((res: any) => {
		tree.value = res.tree
	})
}

const showEditModal = (record: any) => {
	editForm.id = record.id || 0
	editForm.pid = record.pid || 0
	editForm.pName = record.pName || ''
	editForm.name = record.name || ''
	editForm.status = record.status || Enums.common.statusDatas.ACTIVE[0]
	isEditShow.value = true
}

const editOk = () => {
	editFormRef.value
		.validate()
		.then((valid: any) => {
			const formParams: any = {
				id: editForm.id,
				pid: editForm.pid,
				name: valid.name,
				status: editForm.status
			}
			formParams.permissionName = '商品库-分类管理'
			Api.post('/product/category/add-or-edit', formParams, true).then(res => {
				Api.notify(t('通知.保存成功'))
				getCateTree()
			})
			isEditShow.value = false
		})
		.catch((error: any) => {
			console.log(error)
		})
}

const editCancel = () => {
	isEditShow.value = false
}

const del = (record: any) => {
	const formParams: any = { id: record.id }
	formParams.permissionName = '商品库-分类管理'
	Api.post('/product/category/del', formParams, true).then(res => {
		Api.notify(t('通知.删除成功'))
		getCateTree()
	})
}

onMounted(() => {
	getCateTree()
})
</script>

<template>
	<IsGuest>
		<view>
			<a-button type="primary" @click="showEditModal">
				{{ t('分类管理.添加根分类') }}
			</a-button>
		</view>
		<a-divider />
		<view>
			<a-table
				:columns="columns"
				:bordered="true"
				:rowKey="record => record.id"
				:pagination="false"
				:data-source="tree">
				<template #bodyCell="{ text, record, index, column }">
					<template v-if="column.key === 'action'">
						<a-button
							type="primary"
							@click="showEditModal({ pid: record.id, pName: record.name })">
							{{ t('分类管理.添加子分类') }}
						</a-button>
						<a-button @click="showEditModal(record)">{{ t('编辑') }}</a-button>
						<a-popconfirm
							:title="t('分类管理.确定要删除该分类？')"
							:ok-text="t('分类管理.是')"
							:cancel-text="t('分类管理.否')"
							@confirm="del(record)">
							<a-button danger>{{ t('分类管理.删除分类') }}</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</view>
		<view>
			<a-modal
				:title="editForm.id > 0 ? t('编辑') : t('添加')"
				:open="isEditShow"
				@ok="editOk"
				@cancel="editCancel">
				<a-form
					ref="editFormRef"
					:model="editForm"
					:label-col="{ style: { width: '180px' } }"
					:rules="editFormRules">
					<a-form-item :label="t('上级分类名')" v-if="editForm.pid > 0">
						{{ editForm.pName }}
					</a-form-item>
					<a-form-item :label="t('分类名')" name="name">
						<a-input v-model:value="editForm.name" :placeholder="t('请输入分类名!')" />
					</a-form-item>
					<a-form-item :label="t('状态')" name="status">
						<a-radio-group v-model:value="editForm.status">
							<a-radio
								v-for="(item, key) in Enums.common.statusDatas"
								:key="key"
								:value="item[0]">
								{{ item[1] }}
							</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-form>
			</a-modal>
		</view>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
